此篇會透過實際的範例，來介紹一些新手剛開始使用標籤時，可能會遇到的狀況。

• p 標籤
• br 標籤
• ul 標籤
• h1~h6 標籤

p 標籤

<p>內容</p>
<p1>內容1</p1>
<p2>內容2</p2>

不建議使用類似 p1、p2 這種自定義標籤不屬於標準標籤（可以參考 MDN 文件）

另外 p 標籤用於表示一個段落（或一個區塊的文字），而對於段落來說不需透過區分的方式來區分不同的段落，應該採用不同的標題標籤（h1~h6）來表示不同段落的重要性，或是在段落中使用其它標籤來強調內容（粗體、斜體）。

<h1>標題標籤演示</h1>
<h2>標題1</h2>
<p>內容1</p>
<h2>標題2</h2>
<p>內容2</p>

下方例子的 p 標籤都不作為段落使用

<p>
    <a>繼續閱讀</a>
</p>
<p>
    <img src="..." alt="image">
</p>

雖然從 MDN 文件 來看是允許的，文件中 p 標籤允許內容為 段落行內容 Phrasing content (en-US)，而 img、a（如果只包含段落行內容）是符合的。

但不建議這種寫法，因為上方範例來說不能算是段落，只是在父層添加一個 p 標籤而已。

如果範例改為下方那就可以，因為結構來說比較符合段落行內容。

<p>
    中間有一段內容....
    <a>繼續閱讀</a>
</p>
<p>
    第二段內容....
    <img src="..." alt="image">
</p>

延伸閱讀：如果還是想要定義 p1 標籤，那可以參考這篇文章why does h1 make the letters bigger but p1 doesn't define a paragraph

br 標籤

<p>這是一個段落</p>
<br>
<br>
<p>這是一個段落</p>

常見的錯誤是將 br 標籤的換行特性，作為設置元素之間的間距，這不是正確的使用方式。

MDN：「生成換行符號，達到斷行的效果」

元素之間的間距，因該透過 css 樣式來設置，而非使用 br 標籤。

ul 標籤

<ul>
    <h2>列表標題</h2>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

MDN：「ul 標籤內 僅允許 零個或多個 li 標籤」。

ul 標籤內僅能使用 li 標籤，其餘標籤都要移至 ul 標籤外面。

<ul>
    <li><p>國立六角師範大學 視覺設計學系 學士學位 | 2016－2020</p></li>
    <li><p>國立六腳高級中學 美術班 | 2013－2016</p></li>
</ul>

MDN：「li 標籤內允許的內容為 Flow content」，而 p 標籤屬於 Flow element，因此這種寫法是可以的。

但除非是一段完整的內容，以上方範例來說，通常不會在多用一層 p 標籤來包裹文字內容，直接作為 li 標籤文字內容即可。

h1~h6 標籤

<!-- 範例一 -->
<h1>示範跳著使用標題標籤</h1>

<h3>H3 標籤</h3>
<p>段落內容<p>

<h4>H2 標籤</h4>
<p>段落內容<p>

<!-- 範例二 -->
<h5>比較小的標題樣式</h5>
<p>段落內容<p>
<h4>比較小的標題樣式</h4>
<p>段落內容<p>

• 範例一，跳著使用標題標籤（h1 直接跳 h3，沒有使用 h2）
• 範例二，依照文字大小來使用標題標籤

建議依照重要順序來使用，不要跳著使用，以及不要依照文字大小來選用標題標籤。